<template>
	<view>
		<view class="msgTime">周五 21:23</view>
		<view class="otherMsgs">
			<view class="msgHead"></view>
			<view class="msgInfo">
				<view class="msgName">偷铃铛的猫</view>
				<view class="otherMsg">
					明天有约吗？我这边有场活动，看你那边是否能参加？
				</view>
			</view>
		</view>
		<view class="myMsgs">
			<view class="msgHead"></view>
			<view class="msgInfo">
				<view class="myMsg">
					明天有约吗？我这边有场活动，看你那边是否能参加？
				</view>
			</view>
		</view>
		<view class="otherMsgs">
			<view class="msgHead"></view>
			<view class="msgInfo">
				<view class="msgName">偷铃铛的猫</view>
				<view class="otherMsg">
					有时间的
				</view>
			</view>
		</view>
		<view class="myMsgs">
			<view class="msgHead"></view>
			<view class="msgInfo">
				<view class="myMsg">
					好的，那和您约定明天上午9点，先到公司报到
				</view>
			</view>
		</view>
		<view class="otherMsgs">
			<view class="msgHead"></view>
			<view class="msgInfo">
				<view class="msgName">偷铃铛的猫</view>
				<view class="otherMsg">
					好的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title:'美模群聊'
			})
		}
	}
</script>

<style lang="scss">
.msgTime {
	margin-top:20rpx;
	text-align: center;
	color:#CCC;
}
.otherMsgs {
	display: flex;
	margin-top:20rpx;
}
.myMsgs {
	display: flex;
	flex-direction: row-reverse;
	margin-top:20rpx;
}
.msgHead {
	width:80rpx;
	height:80rpx;
	border-radius:80rpx;
	background-color: #CCC;
	margin:10rpx;
}
.msgInfo {
	width:60vw;
}
.msgName {
	color:#CCC;
}
.otherMsg {
	background-color: #FFF;
	border-radius:20rpx;
	padding:20rpx;
	margin-top:10rpx
}
.myMsg {
	background-color: #FFFFCC;
	border-radius:20rpx;
	padding:20rpx;
}
</style>
